import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import org.webrtc.SurfaceViewRenderer

@Composable
fun WebRTCUI(
    connectionState: String,
    onStartConnection: () -> Unit,
    onStopConnection: () -> Unit,
    localSurfaceView: SurfaceViewRenderer?,
    remoteSurfaceView: SurfaceViewRenderer?
) {
    Column(modifier = Modifier.fillMaxSize()) {
        localSurfaceView?.let { surface ->
            AndroidView(
                factory = { surface },
                modifier = Modifier
                    .size(120.dp)
                    .align(Alignment.End)
                    .padding(8.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .border(2.dp, Color.Blue, RoundedCornerShape(8.dp))
            )
        }

        remoteSurfaceView?.let { surface ->
            AndroidView(
                factory = { surface },
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(16f / 9f)
                    .background(Color.Black)
            )
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(
                onClick = onStopConnection,
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color.Red,
                    contentColor = Color.White
                ),
                modifier = Modifier.weight(1f)
            ) {
                Text("断开连接")
            }

            Spacer(modifier = Modifier.width(16.dp))

            Button(
                onClick = onStartConnection,
                modifier = Modifier.weight(1f)
            ) {
                Text("建立连接")
            }
        }

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                .background(
                    when (connectionState) {
                        "已连接" -> Color.Green.copy(alpha = 0.3f)
                        "正在连接..." -> Color.Yellow.copy(alpha = 0.3f)
                        else -> Color.Gray.copy(alpha = 0.3f)
                    }
                )
                .padding(8.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "状态: $connectionState",
                color = when (connectionState) {
                    "已连接" -> Color.Green
                    "正在连接..." -> Color.Yellow
                    else -> Color.Gray
                }
            )
        }
    }
}